<template>
  <view class="invite-layout">
    <my-header background-color="transparent" fit-weixin>
      <template v-slot:menu>
        <text class="invite-rule" @click="play" style="width: 45rpx;height: 45rpx;">规则</text>
      </template>
    </my-header>
    <my-content class="content">
      <!--		<view class="tabbar">
            <image @click="back()" src="https://www.dingxians.cn/upload/images/box/back.png" class="back"></image>
            <image @click="play()" src="https://www.dingxians.cn/upload/20230901/64f1e5623c38b.png" class="play"></image>
          </view>-->
      <view class="cover"></view>
      <!--      <image mode="widthFix" class="bg" src="https://www.dingxians.cn/upload/20230901/64f2066d805dd.png"></image>-->
      <view class="dot"></view>

      <!-- <view class="box">

        <view class="box-item">
          <view class="box-item-left">
            <image class="box-item-img" src="https://www.dingxians.cn/upload/images/common/ic-coupon.png"></image>
          </view>
          <view class="box-item-right">
            <text class="box-item-title">好友下载尊耀潮玩并注册</text>
            <text class="box-item-subtitle">您得4-10元盲盒优惠券</text>
          </view>
        </view>
        <view class="box-item">
          <view class="box-item-left">
            <image class="box-item-img" src="https://www.dingxians.cn/upload/images/index/ic-diamond.png"></image>
          </view>
          <view class="box-item-right">
            <text class="box-item-title">好友下载首次充值88元以上</text>
            <text class="box-item-subtitle">您得钻石 * 8</text>
          </view>
        </view>
      </view> -->
      <view class="invite_box">
<!--        <image class="invite-header" src="https://www.dingxians.cn/upload/images/user/ic-invite-header2.png"
               mode="aspectFill"></image>-->

        <view class="invite-content">
          <my-welfare-tab class="invite-tab" v-model="type" style="width: 100% !important;"
                          :tab-list="['我的奖励', '我的好友']"></my-welfare-tab>

          <scroll-view class="invite-scroll-view" scroll-y="true">
            <template v-if="type === 0">
              <view v-for="(item, index) in rewardData" :key="index">用户({{ item.child_id }})注册，恭喜获得
                <image style="width: 35rpx;height: 35rpx;"
                       src="https://www.dingxians.cn/upload/images/index/ic-coupon.png"></image>
                * {{ item.num }}
              </view>
            </template>
            <template v-else>
              <view v-for="(item, index) in userData" :key="index"
                    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10rpx;">
                <text>用户({{ item.id }}) 注册</text>
                <text>{{ item.created_at }}</text>
              </view>
            </template>
          </scroll-view>
        </view>
      </view>
      <image @click="shareShow()" src="https://www.dingxians.cn/upload/images/user/btn-invite.png" class="invite_btn"></image>

      <uni-popup class="share" ref="share" type="share" safeArea backgroundColor="#141414">
        <view class="share_header">分享</view>
        <view class="share_box">
          <view class="share_item" v-for="item in shareData" :key="item.id">
            <image @click="share(item.id)" mode="heightFix" class="share_image" :src="item.image"></image>
            <view class="share_title">{{ item.title }}</view>
          </view>
        </view>
      </uni-popup>
    </my-content>

  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      type: 0,
      typeData: [{ id: 1, title: '我的奖励' }, { id: 2, title: '我的好友' }],
      rewardData: [],
      userData: [],
      shareData: [
        { id: 1, title: '微信', image: 'https://www.dingxians.cn/upload/images/common/wechat.png' },
        { id: 2, title: '复制链接', image: 'https://www.dingxians.cn/upload/images/common/ic-copy.png' },
      ],
    }
  },
  onLoad() {

  },
  onShow() {
    this.getReward()
  },
  watch: {
    type(newVal) {
      if (newVal === 0) {
        this.getReward()
      } else {
        this.getUser()
      }
    },
  },
  methods: {
    shareShow() {
      this.$refs.share.open()
    },
    back() {
      uni.navigateBack()
    },
    play() {
      this.header('/packageB/content/invite')
    },
    changeType(item) {
      /*if (this.type != item.id) {
        this.type = item.id

      }*/

    },
    getReward() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userInviteRewards.index().then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          this.rewardData = res.data
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getUser() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userInviteRewards.child().then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          this.userData = res.data
        }
      }).catch(error => {
        console.log(error)
      })
    },

    share(id) {
      // #ifdef MP-WEIXIN
      uni.showToast({icon: 'none', title: '请点击右上角按钮分享'})
      // #endif
      this.user_id = uni.getStorageSync('user_id')
      let url = `https://www.dingxians.cn/register?invite_code=${this.user_id}`
      if (id == 1) {
        uni.share({
          provider: 'weixin',
          scene: 'WXSceneSession',
          type: 0,
          href: url,
          title: '邀您一起拆盲盒！100%必出实物商品',
          summary: '潮玩派x兴趣电商，为你带来高级的开盒体验',
          imageUrl: 'https://www.dingxians.cn/upload/20230827/64ea2e7f9ed5f.png',
          success: function(res) {

          },
          fail: function(err) {

          },
        })
      } else {
        uni.setClipboardData({
          data: url,
          success: () => {
            this.show('链接已复制')
          },
          fail: () => {

          },
        })
      }
    },
  },
}
</script>

<style lang="scss">
.invite-layout {
  background: url("https://www.dingxians.cn/upload/images/user/bg-invite.png") #000 no-repeat;
  background-size: 100% 1200rpx;
  min-height: 100vh;
  height: 100%;
  padding-bottom: 200rpx !important;
}

.content {
  position: relative;
  min-height: 100vh;
  height: 100%;

  .tabbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    left: 0;
    top: 80rpx;
    z-index: 5;

    .back {
      width: 65rpx;
      height: 65rpx;
      margin-left: 20rpx;
    }

    .play {
      width: 65rpx;
      height: 65rpx;
      margin-right: 20rpx;
    }

  }

  /*.cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    z-index: -1000;
    background-color: #270f7c;
  }*/

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    z-index: -100;
  }

  .dot {
    height: 760rpx;
  }

  .box {
    width: 700rpx;
    height: 680rpx;
    /*height: 542rpx;*/
    margin: 0 auto;
    position: relative;
    /*display: flex;
    justify-content: center;
    flex-direction: column;*/
    box-sizing: border-box;
    padding: 200rpx 64rpx;
    background-image: url("https://www.dingxians.cn/upload/images/user/bg-invite-box1.png");
    background-size: 100% 100%;

    .box-item {
      display: flex;
      margin: 20rpx 0;

      .box-item-left {
        width: 145rpx;
        height: 145rpx;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .box-item-img {
          width: 90rpx;
          height: 90rpx;
        }
      }

      .box-item-right {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 28rpx;
        color: white;

        .box-item-title {
          font-weight: bold;
        }

        .box-item-subtitle {
          margin-top: 20rpx;
          color: #DED000;
        }
      }
    }

    .box-header {
      display: block;
      margin: 0 auto;
      width: 559rpx;
      height: 58rpx;
    }

    .box_bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
    }

    .box_top {
      position: relative;
      width: 600rpx;
      height: 280rpx;
      margin: 60rpx auto 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;

      .coupon_image {
        width: 80rpx;
        margin-bottom: 40rpx;
        z-index: 2;
      }

      .box_top_title {
        font-size: 24rpx;
        color: #fff;
        margin-bottom: 20rpx;
      }

      .box_top_bg {
        width: 600rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
    }

    .box_bottom {
      position: relative;
      width: 600rpx;
      margin: 50rpx auto 0 auto;
      height: 280rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;

      .coupon_image {
        width: 100rpx;
        margin-bottom: 30rpx;
        z-index: 2;
      }

      .box_bottom_title {
        font-size: 24rpx;
        color: #fff;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;

        .point_icon {
          width: 40rpx;
          margin: 0 10rpx;
        }
      }

      .box_bottom_bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
      }
    }
  }

  .invite_box {
    width: 700rpx;
    margin: 20rpx auto 0 auto;
    /*height: 676rpx;*/
    // border: 1rpx solid red;
    position: relative;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    box-sizing: border-box;
    padding: 20rpx;
    background-image: url("https://www.dingxians.cn/upload/images/user/bg-invite-box2.png");
    background-size: 100% 100%;

    .invite-header {
      display: block;
      margin: 0 auto;
      width: 559rpx;
      height: 58rpx;
    }

    .invite-content {
      width: 600rpx;
      height: 618rpx;
      margin: 100rpx 20rpx auto;
      display: flex;
      flex-direction: column;
      background-size: 100% 100%;

      .invite-tab ::v-deep .tab {
        width: 100%;
      }

      .invite-scroll-view {
        flex: 1;
        overflow-y: hidden;
        color: white;
        box-sizing: border-box;
        padding: 0 20rpx 20rpx;
      }
    }

    .invite_content {
      width: 600rpx;
      height: 518rpx;
      margin: 20rpx auto;
      position: relative;

      .invite_conent_header {
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        line-height: 80rpx;

        .invite_conent_header_item {
          flex: 1;
          display: flex;
          justify-content: center;
          color: #CFB4F1;
          font-weight: bold;

          &.active {
            color: #fff;
          }
        }
      }

      .invite_content_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
      }

      .reward_box {
        display: flex;
        flex-direction: column;
        overflow: scroll;
        height: 550rpx;

        .reward_box_item {
          margin: 10rpx 20rpx;

          .reward_box_item_title {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #fff;

            &.user {
              justify-content: space-between;

              .time {
                font-size: 24rpx;
              }
            }

            .reward_image {
              height: 40rpx;
              margin: 0 10rpx;
            }
          }
        }
      }
    }

    .invite_box_bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
    }
  }

  .invite_btn {
    position: fixed;
    bottom: 50rpx;
    width: 610rpx;
    left: 50%;
    transform: translateX(-50%);
    height: 140rpx;
    z-index: 5;
    line-height: 140rpx;
    text-align: center;
    color: white;
    font-size: 28rpx;
    font-weight: bold;
    background-image: url("https://www.dingxians.cn/upload/images/common/btn-primary.png");
    background-size: 100% 100%;
  }

  .share {
    display: flex;
    flex-direction: column;

    font-size: 30rpx;
    color: white;

    .share_header {
      text-align: center;
      margin: 30rpx 0;
    }

    .share_box {
      display: flex;
      justify-content: space-around;
      margin-top: 100rpx;
      padding-bottom: 20rpx;

      .share_item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .share_image {
          height: 100rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}
</style>